<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色管理 - 酒店系统权限管理</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-6">
        <!-- 页面标题和操作按钮 -->
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">角色管理</h1>
            <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded flex items-center" onclick="openModal('addRoleModal')">
                <i class="fas fa-plus mr-2"></i> 添加角色
            </button>
        </div>
        
        <!-- 搜索和筛选 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="col-span-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1">角色名称</label>
                    <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="搜索角色名称...">
                </div>
                <div class="col-span-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1">角色类型</label>
                    <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                        <option value="">全部类型</option>
                        <option value="1">系统角色</option>
                        <option value="2">业务角色</option>
                    </select>
                </div>
                <div class="col-span-1">
                    <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                    <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                        <option value="">全部状态</option>
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </div>
            </div>
            <div class="flex justify-end mt-4">
                <button class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2">
                    重置
                </button>
                <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                    搜索
                </button>
            </div>
        </div>
        
        <!-- 角色列表 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                <input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                角色名称
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                角色编码
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                角色类型
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                描述
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                创建时间
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                状态
                            </th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                操作
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">系统管理员</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">ROLE_ADMIN</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
                                    系统角色
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-500 max-w-xs truncate">系统最高权限管理员，可以管理所有系统功能和配置</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                2023-01-01 08:00:00
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    启用
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-3" onclick="openModal('editRoleModal')">编辑</button>
                                <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="openModal('assignPermissionModal')">分配权限</button>
                                <button class="text-red-600 hover:text-red-900">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">酒店经理</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">ROLE_MANAGER</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                    业务角色
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-500 max-w-xs truncate">酒店管理人员，负责酒店日常运营管理</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                2023-01-02 09:30:00
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    启用
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-3" onclick="openModal('editRoleModal')">编辑</button>
                                <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="openModal('assignPermissionModal')">分配权限</button>
                                <button class="text-red-600 hover:text-red-900">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">前台主管</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">ROLE_RECEPTION_SUPERVISOR</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                    业务角色
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-500 max-w-xs truncate">前台接待主管，负责前台接待工作的管理和协调</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                2023-01-03 10:15:00
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    启用
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-3" onclick="openModal('editRoleModal')">编辑</button>
                                <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="openModal('assignPermissionModal')">分配权限</button>
                                <button class="text-red-600 hover:text-red-900">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">前台接待</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">ROLE_RECEPTIONIST</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                    业务角色
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-500 max-w-xs truncate">前台接待人员，负责客人接待、入住和退房等服务</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                2023-01-04 11:45:00
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                    禁用
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-3" onclick="openModal('editRoleModal')">编辑</button>
                                <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="openModal('assignPermissionModal')">分配权限</button>
                                <button class="text-red-600 hover:text-red-900">删除</button>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-3" onclick="openModal('editRoleModal')">编辑</button>
                                <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="openModal('assignPermissionModal')">分配权限</button>
                                <button class="text-red-600 hover:text-red-900" onclick="openModal('deleteConfirmModal')">删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">客房服务</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">ROLE_ROOM_SERVICE</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                    业务角色
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-500 max-w-xs truncate">客房服务人员，负责客房清洁和维护</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                2023-01-05 14:20:00
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    启用
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-3" onclick="openModal('editRoleModal')">编辑</button>
                                <button class="text-blue-600 hover:text-blue-900 mr-3" onclick="openModal('assignPermissionModal')">分配权限</button>
                                <button class="text-red-600 hover:text-red-900" onclick="openModal('deleteConfirmModal')">删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <!-- 分页 -->
            <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                <div class="flex-1 flex justify-between sm:hidden">
                    <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        上一页
                    </a>
                    <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                        下一页
                    </a>
                </div>
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            显示第 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">12</span> 条记录
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">上一页</span>
                                <i class="fas fa-chevron-left"></i>
                            </a>
                            <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                1
                            </a>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                2
                            </a>
                            <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                                3
                            </a>
                            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                                <span class="sr-only">下一页</span>
                                <i class="fas fa-chevron-right"></i>
                            </a>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加角色模态框 -->
    <div id="addRoleModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">添加角色</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('addRoleModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <form>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">角色名称</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入角色名称">
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">角色编码</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" placeholder="请输入角色编码">
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">角色类型</label>
                            <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                <option value="">请选择角色类型</option>
                                <option value="1">系统角色</option>
                                <option value="2">业务角色</option>
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                            <div class="mt-2">
                                <label class="inline-flex items-center">
                                    <input type="radio" class="form-radio text-indigo-600" name="status" value="1" checked>
                                    <span class="ml-2">启用</span>
                                </label>
                                <label class="inline-flex items-center ml-6">
                                    <input type="radio" class="form-radio text-indigo-600" name="status" value="0">
                                    <span class="ml-2">禁用</span>
                                </label>
                            </div>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">描述</label>
                            <textarea class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" rows="3" placeholder="请输入角色描述"></textarea>
                        </div>
                    </div>
                    <div class="mt-4 flex justify-end">
                        <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('addRoleModal')">
                            取消
                        </button>
                        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 编辑角色模态框 -->
    <div id="editRoleModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">编辑角色</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('editRoleModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <form>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">角色名称</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" value="系统管理员">
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">角色编码</label>
                            <input type="text" class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" value="ROLE_ADMIN" readonly>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">角色类型</label>
                            <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
                                <option value="">请选择角色类型</option>
                                <option value="1" selected>系统角色</option>
                                <option value="2">业务角色</option>
                            </select>
                        </div>
                        <div class="col-span-1">
                            <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                            <div class="mt-2">
                                <label class="inline-flex items-center">
                                    <input type="radio" class="form-radio text-indigo-600" name="edit-status" value="1" checked>
                                    <span class="ml-2">启用</span>
                                </label>
                                <label class="inline-flex items-center ml-6">
                                    <input type="radio" class="form-radio text-indigo-600" name="edit-status" value="0">
                                    <span class="ml-2">禁用</span>
                                </label>
                            </div>
                        </div>
                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-1">描述</label>
                            <textarea class="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" rows="3">系统最高权限管理员，可以管理所有系统功能和配置</textarea>
                        </div>
                    </div>
                    <div class="mt-4 flex justify-end">
                        <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('editRoleModal')">
                            取消
                        </button>
                        <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 分配权限模态框 -->
    <div id="assignPermissionModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-2/3 shadow-lg rounded-md bg-white">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">分配权限 - 系统管理员</h3>
                <button class="text-gray-400 hover:text-gray-500" onclick="closeModal('assignPermissionModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mt-2">
                <div class="mb-4">
                    <div class="flex justify-between items-center mb-2">
                        <h4 class="text-md font-medium text-gray-700">权限列表</h4>
                        <div>
                            <button type="button" class="text-indigo-600 hover:text-indigo-900 text-sm mr-2" id="expandAllBtn">
                                展开全部
                            </button>
                            <button type="button" class="text-indigo-600 hover:text-indigo-900 text-sm" id="collapseAllBtn">
                                收起全部
                            </button>
                        </div>
                    </div>
                    <div class="border rounded-md p-4 max-h-96 overflow-y-auto">
                        <!-- 系统管理权限 -->
                        <div class="mb-4">
                            <div class="flex items-center mb-2">
                                <button class="text-gray-500 hover:text-gray-700 mr-2 toggle-btn" data-target="systemManagement">
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 parent-checkbox" data-group="systemManagement">
                                    <span class="ml-2 text-gray-700 font-medium">系统管理</span>
                                </label>
                            </div>
                            <div class="ml-8 grid grid-cols-1 md:grid-cols-3 gap-2" id="systemManagement">
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="systemManagement" checked>
                                    <span class="ml-2 text-gray-700">用户管理</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="systemManagement" checked>
                                    <span class="ml-2 text-gray-700">角色管理</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="systemManagement" checked>
                                    <span class="ml-2 text-gray-700">权限管理</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="systemManagement" checked>
                                    <span class="ml-2 text-gray-700">菜单管理</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="systemManagement" checked>
                                    <span class="ml-2 text-gray-700">组织管理</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="systemManagement" checked>
                                    <span class="ml-2 text-gray-700">日志管理</span>
                                </label>
                            </div>
                        </div>
                        
                        <!-- 酒店管理权限 -->
                        <div class="mb-4">
                            <div class="flex items-center mb-2">
                                <button class="text-gray-500 hover:text-gray-700 mr-2 toggle-btn" data-target="hotelManagement">
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 parent-checkbox" data-group="hotelManagement">
                                    <span class="ml-2 text-gray-700 font-medium">酒店管理</span>
                                </label>
                            </div>
                            <div class="ml-8 grid grid-cols-1 md:grid-cols-3 gap-2" id="hotelManagement">
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="hotelManagement" checked>
                                    <span class="ml-2 text-gray-700">酒店信息</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="hotelManagement" checked>
                                    <span class="ml-2 text-gray-700">房型管理</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="hotelManagement" checked>
                                    <span class="ml-2 text-gray-700">房间管理</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="hotelManagement" checked>
                                    <span class="ml-2 text-gray-700">价格管理</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="hotelManagement" checked>
                                    <span class="ml-2 text-gray-700">设施管理</span>
                                </label>
                            </div>
                        </div>
                        
                        <!-- 预订管理权限 -->
                        <div class="mb-4">
                            <div class="flex items-center mb-2">
                                <button class="text-gray-500 hover:text-gray-700 mr-2 toggle-btn" data-target="bookingManagement">
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 parent-checkbox" data-group="bookingManagement">
                                    <span class="ml-2 text-gray-700 font-medium">预订管理</span>
                                </label>
                            </div>
                            <div class="ml-8 grid grid-cols-1 md:grid-cols-3 gap-2" id="bookingManagement">
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="bookingManagement" checked>
                                    <span class="ml-2 text-gray-700">预订列表</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="bookingManagement" checked>
                                    <span class="ml-2 text-gray-700">创建预订</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="bookingManagement" checked>
                                    <span class="ml-2 text-gray-700">修改预订</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="bookingManagement" checked>
                                    <span class="ml-2 text-gray-700">取消预订</span>
                                </label>
                            </div>
                        </div>
                        
                        <!-- 客户管理权限 -->
                        <div class="mb-4">
                            <div class="flex items-center mb-2">
                                <button class="text-gray-500 hover:text-gray-700 mr-2 toggle-btn" data-target="customerManagement">
                                    <i class="fas fa-chevron-down"></i>
                                </button>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 parent-checkbox" data-group="customerManagement">
                                    <span class="ml-2 text-gray-700 font-medium">客户管理</span>
                                </label>
                            </div>
                            <div class="ml-8 grid grid-cols-1 md:grid-cols-3 gap-2" id="customerManagement">
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="customerManagement" checked>
                                    <span class="ml-2 text-gray-700">客户列表</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="customerManagement" checked>
                                    <span class="ml-2 text-gray-700">添加客户</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="customerManagement" checked>
                                    <span class="ml-2 text-gray-700">编辑客户</span>
                                </label>
                                <label class="inline-flex items-center">
                                    <input type="checkbox" class="form-checkbox text-indigo-600 child-checkbox" data-parent="customerManagement" checked>
                                    <span class="ml-2 text-gray-700">客户历史</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-end mt-4">
                    <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('assignPermissionModal')">
                        取消
                    </button>
                    <button type="button" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded">
                        保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div id="deleteConfirmModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
            <div class="mt-3 text-center">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                    <i class="fas fa-exclamation-triangle text-red-600"></i>
                </div>
                <h3 class="text-lg leading-6 font-medium text-gray-900 mt-2">删除确认</h3>
                <div class="mt-2 px-7 py-3">
                    <p class="text-sm text-gray-500">
                        您确定要删除选中的角色吗？此操作不可逆。
                    </p>
                </div>
                <div class="flex justify-center mt-4 px-4 py-3">
                    <button type="button" class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded mr-2" onclick="closeModal('deleteConfirmModal')">
                        取消
                    </button>
                    <button type="button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
                        确认删除
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript 脚本 -->
    <script>
        // 打开模态框
        function openModal(modalId) {
            document.getElementById(modalId).classList.remove('hidden');
            document.body.classList.add('overflow-hidden');
        }
        
        // 关闭模态框
        function closeModal(modalId) {
            document.getElementById(modalId).classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
        }
        
        // 关闭模态框的点击事件（点击模态框外部区域关闭）
        window.onclick = function(event) {
            const modals = document.querySelectorAll('.fixed.inset-0');
            modals.forEach(modal => {
                if (event.target === modal) {
                    modal.classList.add('hidden');
                    document.body.classList.remove('overflow-hidden');
                }
            });
        }
        
        // 权限树展开/收起功能
        document.addEventListener('DOMContentLoaded', function() {
            // 切换按钮点击事件
            const toggleBtns = document.querySelectorAll('.toggle-btn');
            toggleBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const targetId = this.getAttribute('data-target');
                    const targetElement = document.getElementById(targetId);
                    
                    if (targetElement.classList.contains('hidden')) {
                        targetElement.classList.remove('hidden');
                        this.querySelector('i').classList.remove('fa-chevron-right');
                        this.querySelector('i').classList.add('fa-chevron-down');
                    } else {
                        targetElement.classList.add('hidden');
                        this.querySelector('i').classList.remove('fa-chevron-down');
                        this.querySelector('i').classList.add('fa-chevron-right');
                    }
                });
            });
            
            // 展开全部按钮
            document.getElementById('expandAllBtn').addEventListener('click', function() {
                const groups = document.querySelectorAll('[id^="systemManagement"], [id^="hotelManagement"], [id^="bookingManagement"], [id^="customerManagement"]');
                groups.forEach(group => {
                    group.classList.remove('hidden');
                });
                
                const toggleBtns = document.querySelectorAll('.toggle-btn');
                toggleBtns.forEach(btn => {
                    btn.querySelector('i').classList.remove('fa-chevron-right');
                    btn.querySelector('i').classList.add('fa-chevron-down');
                });
            });
            
            // 收起全部按钮
            document.getElementById('collapseAllBtn').addEventListener('click', function() {
                const groups = document.querySelectorAll('[id^="systemManagement"], [id^="hotelManagement"], [id^="bookingManagement"], [id^="customerManagement"]');
                groups.forEach(group => {
                    group.classList.add('hidden');
                });
                
                const toggleBtns = document.querySelectorAll('.toggle-btn');
                toggleBtns.forEach(btn => {
                    btn.querySelector('i').classList.remove('fa-chevron-down');
                    btn.querySelector('i').classList.add('fa-chevron-right');
                });
            });
            
            // 父复选框选中/取消选中所有子复选框
            const parentCheckboxes = document.querySelectorAll('.parent-checkbox');
            parentCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const groupName = this.getAttribute('data-group');
                    const childCheckboxes = document.querySelectorAll(`.child-checkbox[data-parent="${groupName}"]`);
                    
                    childCheckboxes.forEach(childCheckbox => {
                        childCheckbox.checked = this.checked;
                    });
                });
            });
            
            // 子复选框状态变化时更新父复选框状态
            const childCheckboxes = document.querySelectorAll('.child-checkbox');
            childCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const parentName = this.getAttribute('data-parent');
                    const parentCheckbox = document.querySelector(`.parent-checkbox[data-group="${parentName}"]`);
                    const siblingCheckboxes = document.querySelectorAll(`.child-checkbox[data-parent="${parentName}"]`);
                    
                    let allChecked = true;
                    let allUnchecked = true;
                    
                    siblingCheckboxes.forEach(siblingCheckbox => {
                        if (siblingCheckbox.checked) {
                            allUnchecked = false;
                        } else {
                            allChecked = false;
                        }
                    });
                    
                    if (allChecked) {
                        parentCheckbox.checked = true;
                        parentCheckbox.indeterminate = false;
                    } else if (allUnchecked) {
                        parentCheckbox.checked = false;
                        parentCheckbox.indeterminate = false;
                    } else {
                        parentCheckbox.indeterminate = true;
                    }
                });
            });
            
            // 初始化父复选框状态
            function initParentCheckboxes() {
                const parentCheckboxes = document.querySelectorAll('.parent-checkbox');
                parentCheckboxes.forEach(parentCheckbox => {
                    const groupName = parentCheckbox.getAttribute('data-group');
                    const childCheckboxes = document.querySelectorAll(`.child-checkbox[data-parent="${groupName}"]`);
                    
                    let allChecked = true;
                    let allUnchecked = true;
                    
                    childCheckboxes.forEach(childCheckbox => {
                        if (childCheckbox.checked) {
                            allUnchecked = false;
                        } else {
                            allChecked = false;
                        }
                    });
                    
                    if (allChecked) {
                        parentCheckbox.checked = true;
                        parentCheckbox.indeterminate = false;
                    } else if (allUnchecked) {
                        parentCheckbox.checked = false;
                        parentCheckbox.indeterminate = false;
                    } else {
                        parentCheckbox.indeterminate = true;
                    }
                });
            }
            
            // 页面加载时初始化父复选框状态
            initParentCheckboxes();
            
            // 全选/取消全选功能
            const selectAllCheckbox = document.querySelector('thead input[type="checkbox"]');
            if (selectAllCheckbox) {
                selectAllCheckbox.addEventListener('change', function() {
                    const checkboxes = document.querySelectorAll('tbody input[type="checkbox"]');
                    checkboxes.forEach(checkbox => {
                        checkbox.checked = this.checked;
                    });
                });
            }
        });
    </script>
</body>
</html>